<template>
  <div class="Message">
    <div class="main">
      <!-- 首页组件 -->
      <index-header ref="0" />
      <!-- 退役军人专区 -->
      <veteransZone />

      <!-- 退役军人专区 -->
      <!-- <militaryArea ref="1" /> -->

      <!-- 高校毕业生专区 -->
      <!-- <graduationZone /> -->

      <!--热门职位 -->
      <hotposts ref="2" />

      <!-- 热门公司 -->
      <hotCompanies ref="3" />
      <!-- 站点公告 -->
      <announcement />

      <!-- 跳转到指定模块 -->
      <!-- <div class="btn-box" v-show="isslider">
        <div :class="{'active':isActive == index}" v-for="(item,index) in menu"
          @click="goAssignBlock(item.id,50, index)" :key="index">
          {{item.txt}}</div>
      </div> -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'baseform',
  data () {
    return {
      isActive: 0,
      isslider: true,
      menu: [{ txt: '人才政策', id: 0 }, { txt: '灵活就业岗位专区', id: 1 }, { txt: '热门企业', id: 3 }]
    };
  },
  methods: {
    //el 标签  speed 滚动速率 此处是50px 值越大滚动的越快
    goAssignBlock (el, speed, index) {
      let _this = this;
      _this.isActive = index
      let windowH = window.innerHeight; //浏览器窗口高度
      let h = this.$refs[el]['$el'].offsetHeight; //模块内容高度
      let t = this.$refs[el]['$el'].offsetTop; //模块相对于内容顶部的距离
      let top = t - (windowH - h) / 2; //需要滚动到的位置，若改为 t 则滚动到模块顶部位置，此处是滚动到模块相对于窗口垂直居中的位置
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop; //滚动条距离顶部高度
      let currentTop = scrollTop; //默认滚动位置为当前滚动条位置，若改为0，则每次都会从顶部滚动到指定位置
      let requestId;
      //采用requestAnimationFrame，平滑动画
      function step () {
        //判断让滚动条向上滚还是向下滚
        if (scrollTop < top) {
          if (currentTop <= top) {
            //   window.scrollTo(x,y) y为上下滚动位置
            window.scrollTo(0, currentTop);
            requestId = window.requestAnimationFrame(step);
          } else {
            window.cancelAnimationFrame(requestId);
          }
          //向下滚动
          currentTop += speed;
        } else {
          if (top <= currentTop) {
            //注：此处 - speed 是解决居中时存在的问题，可自行设置或去掉
            window.scrollTo(0, currentTop - speed);
            requestId = window.requestAnimationFrame(step);
          } else {
            window.cancelAnimationFrame(requestId);
          }
          //向上滚动
          currentTop -= speed;
        }
      }
      window.requestAnimationFrame(step);
    }
  },
  mounted () {
    // let _this=this
    // 监听滚动的高度 给左边导航菜单添加样式
    window.addEventListener('scroll', () => {
      let top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
      if (top > 1700) {
        this.isActive = 3
      } else if (top > 1125) {
        this.isActive = 2
      } else if (top > 500) {
        this.isActive = 1
      } else {
        this.isActive = 0
      }
    }),
      window.onresize = () => {
        return (() => {
          window.screenWidth = document.body.clientWidth
          if (window.screenWidth < 1500) {
            this.isslider = false
          } else {
            this.isslider = true
          }
        })()
      }
  }
};
</script>
<style lang="css" scoped>
.Message {
    margin-top: 8px;
    width: 100%;
}
.Message .main {
    background: #fff;
    /* width: 1200px; */
    margin: 0 auto;
}

.btn-box {
    position: fixed;
    left: 0;
    top: 200px;
    width: 132px;
    height: 225px;
    background: rgba(255, 255, 255, 1);
    opacity: 1;
}
.btn-box div {
    display: block;
    width: 100%;
    height: 56px;
    line-height: 56px;
    text-align: center;
    border: none;
    color: #222222;
    cursor: pointer;
    font-size: 14px;
    font-family: PingFang SC;
    background: rgba(255, 255, 255, 1);
    font-weight: 400;
}
.btn-box div:hover {
    background: #409eff;
    color: #ffffff;
}
.btn-box .active {
    background: #409eff;
    color: #ffffff;
    transition: 1.2s;
}
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-active {
    opacity: 0;
}
.block {
    border: 1px solid white;
    width: 100%;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* font-size: 5rem; */
    color: white;
    box-sizing: border-box;
    background: hsl(221, 98%, 68%);
}
</style>
